$(function () {
    /**
     * 用户搜索逻辑
     * 1. 获取到用户输入的内容(要去掉首尾的空格) 进行判断
     * 2. 如果用户输入的内容为空，提示用户 亲，请输入内容
     * 3. 如果有内容
     *      3.1 跳转到搜索结果页面 要携带用户输入的参数
     *      3.2 存储历史记录 localStorage 数组 JSON.stringfy() JSON.parse()
     */
    // // 3.1 全局创建一个数组 X 判断 如果 localStorage中有数据了 你就拿过来 否则 []
    // var history = localStorage.history ? JSON.parse(localStorage.history) : [];

    // // 3.2 已进入页面就要获取到history的数据并且渲染到页面
    // // var html = template('list', {
    // //     data: history
    // // })
    // // 对于要遍历没有名字的数组，在模板引擎中可以用$data 去代替。
    // var html = template('list', history)
    // console.log(html)
    // $('.list-content>ul').html(html)
    var history;

    function getHistory() {
        // 3.1 全局创建一个数组 X 判断 如果 localStorage中有数据了 你就拿过来 否则 []
        history = localStorage.history ? JSON.parse(localStorage.history) : [];

        // 3.2 已进入页面就要获取到history的数据并且渲染到页面
        // var html = template('list', {
        //     data: history
        // })
        // 对于要遍历没有名字的数组，在模板引擎中可以用$data 去代替。
        var html = template('list', history)
        console.log(html)
        $('.list-content>ul').html(html)
    }
    getHistory()


    // 1. 点击搜索按钮
    $('.search button').on('tap', function () {
        var keyword = $.trim($('.search input').val())
        if (keyword == "") {
            mui.toast('亲，请输入内容')
        } else {
            history.unshift(keyword)
            // push 从数组后面插入一个
            // pop  从数组后面删除一个

            // shift 从数组前面删除一个
            // unshift 从数组前面插入一个
            localStorage.history = JSON.stringify(history)
            getHistory()
            console.log(history)
            // window.location.href = "searchList.html?keyword=" + keyword
        }
        console.log(keyword)
    })

    // 清空历史记录
    $('.clearHistory').on('tap', function () {
        // 清空本地存储的数据 注意不要使用clear 否则会清除掉其他人保存的数据
        localStorage.history = "[]"
        // 重新渲染
        getHistory()
    })
    // 缺省文字或者图片课下去完成 点击搜索之后 清空输入框的内容
})